<template>
  <div>
    <el-header style="text-align: right; font-size: 12px">
      <img src="../image/logo.png" height='60px' width="179px" style="float:left" alt="">
      <el-button type="info" @click="logOut" size="mini">退出登录</el-button>
    </el-header>
  </div>
</template>

<script>
export default {
  name: 'HeaderTop',
  mounted() {
    let loginKey = localStorage.getItem('userInfo')
    if (loginKey) {
      this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
      let logintime=this.userInfo.data.logintime
      let loginTime = new Date(logintime)
      let thisTime=new Date();
      if ((thisTime - loginTime) > 1000 * 60 * 60 * 24) {
        localStorage.removeItem('userInfo')
        this.$message.error('登陆超时！')
        setTimeout(() => {
          this.$router.push('/login')
        }, 2000)
      }
    } else {
      this.$message.error("请先登录！")
      setTimeout(() => {
        this.$router.push('/')
      }, 2000)
    }
  
  },
  methods: {
    logOut() {
      localStorage.removeItem('userInfo'),
        this.$router.push({
          path: '/login'
        })
    }
  },



}
</script>


<style scope>
.el-header {
  background-color: #333;
  /* background: linear-gradient(to top ,hsl(199, 72%, 53%),rgb(95, 140, 168)); */
  color: #fff;
  text-align: center;
  line-height: 60px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  border-bottom: 1px solid #888;
  /* box-shadow: 0 2px 6px #bbb; */
}

.el-header span {
  font-size: large;
}
</style>